<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="parentId">
        <typeSelect v-model="list.filter.parentId" :maxLevel="2"></typeSelect>
      </el-form-item>

      <el-form-item>
        <el-button @click="reset"> 重置 </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="分类级别" prop="level" />
      <el-table-column label="上级品类" prop="parentName" />
      <el-table-column label="分类名称" prop="categoryName" />
      <el-table-column label="同级排序序号" prop="sort" />
      <el-table-column label="更新时间" prop="updateTime" />
      <!-- <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <AuthButton @click="u({ id: row.id })" name="编辑" />
          <AuthButton @click="d({ id: row.id })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
       width="70%"
    >
      <template #el-form>
        <el-form-item label="分类名称" prop="categoryName" verify>
          <el-input
            v-model="form.data.categoryName"
            clearable
            maxlength="30"
            show-word-limit
            placeholder="请输入分类名称"
          />
        </el-form-item>
        <el-form-item label="同级展示顺序" prop="sort" verify>
          <Sort v-model="form.data.sort" />
        </el-form-item>

        <el-form-item label="分类级别" prop="parentId" verify>
          <typeSelect
            v-model="form.data.parentId"
            :isroot="true"
            :maxLevel="2"
            @levelChange="levelChange"
          ></typeSelect>
        </el-form-item>
        <template v-if="form.data.level == 1">
          <el-form-item label="一级分类图标" prop="logo" verify>
            <Imgpond v-model="form.data.logo" :count="1" aspectRatio="1/1" />
          </el-form-item>
        </template>
        <template v-if="form.data.level == 2">
          <el-form-item label="商品拉取方式" prop="type" verify>
            <KiSelect
              v-model="form.data.type"
              :options="productTypes"
              placeholder="商品拉取方式"
            />
          </el-form-item>
          <el-form-item
            v-if="[0, 1].includes(form.data.type)"
            :label="form.data.type == '1' ? '选择商品' : '选择分类'"
          >
            <BoundGoods
              v-model="form.data.relationList"
              v-if="form.data.type == '1'"
            />
            <CategorySelect
              v-model="form.data.relationList"
              :props="{ multiple: true }"
              v-if="form.data.type == '0'"
            />
          </el-form-item>
        </template>
      </template>
    </KiFormDialog>
  </div>
</template>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from "@/utils/pageMixin";
import useAdmateAdapter from "@/utils/useAdmateAdapter";
import BoundGoods from "@/components/BoundGoods";
import CategorySelect from "@/components/CategorySelect";
import typeSelect from "./components/type-select.vue";

export default {
  mixins: [pageMixin],
  components: { typeSelect, BoundGoods, CategorySelect },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: "sot-admin-api/product/front-category",
      axiosConfig: {
        d: {
          url: "deleteFrontCategory",
        },
      },
      form: {
        data: {
          sort: 1,
          type: "",
          relationList: [],
        },
      },
    }),
  data() {
    return {
      levels: [
        { label: "一级分类", value: "1" },
        { label: "二级分类", value: "2" },
      ],
      productTypes: [
        { dataValue: 0, dataName: "按商品分类拉取" },
        { dataValue: 1, dataName: "手动拉取" },
      ],
    };
  },
  watch: {
    "form.data.productType"(n, o) {
      if ((n && [1, 2].includes(o)) || !n) {
        this.form.data.relationList = [];
      }
    },
  },
  methods: {
    // 所属分类改变， 重新设置等级
    levelChange(n) {
      this.$set(this.form.data, "level", n);
      if (n === 1) {
        this.form.data.type = undefined;
        this.form.data.relationList = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-container {
  display: flex;
  .app-container {
    flex: 1;
  }
}</style>
